<template>
  <div id="index-container">
    <Sidebar @changeCollapse="setContentWidth()"></Sidebar>
    <div id="index-content" ref="index-content">
       <router-view/>
    </div>
  </div>
</template>

<script>
  import Sidebar from "@/components/Sidebar.vue";
  export default {
    name: 'Index',
    components: {
      Sidebar,
    },
    data(){
      return {

      }
    },
    methods:{
      setContentWidth(isCollapse){
        this.$nextTick(() => {
          this.$refs['index-content'].style.width = !isCollapse ? 'calc(100%)' : 'calc(100% - 200px)';
        })
      }
    }

  }
</script>

<style lang="less">
  #index-container{
    width: 100%;
    height: 100%;
    display: flex;
    background: #f0f2f5;

    #index-content{
      margin-left: 6px;
      width: 100%;
      min-width: 800px;
      height: 100%;
      border-radius: 8px;
      background: url("../assets/img/index-background.jpg") no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
